<template>
	<view class="m30">
		<view class="bgFff radius50 box_shadow">
			<view>
				<swiper class="swiper" circular indicator-dots autoplay :interval="3000"
					indicator-active-color="#FFDE6D">
					<swiper-item v-for="(item,index) in detail.imgs" :key="index">
						<!-- <image :src="api_host + item" mode="widthFix" class="width100"></image> -->
						<u--image :showLoading="true" :src="api_host + item" width="100%" height="auto"
							mode="widthFix"></u--image>
					</swiper-item>
				</swiper>
				<!-- <ban-swiper :list="detail.imgs"></ban-swiper> -->
			</view>
			<view class="p30">
				<view class="flex-jus">
					<view class="flex">
						<image v-show="detail.petSex == 1" src="../static/pet/boy.png" mode=""
							style="width: 28rpx;height: 28rpx;vertical-align: middle;"></image>
						<image v-show="detail.petSex == 2" src="../static/pet/girl.png" mode=""
							style="width: 28rpx;height: 28rpx;vertical-align: middle;"></image>
						<text class="f28 bold c343 ml10 mr30">{{detail.petName}}</text>
						<text class="f24 c999">{{detail.petAddrLabel}}</text>
					</view>
					<view class="mr20">
						<view @click="starlikeBtn(2,2,detail.id)">
							<u-icon :name="detail.isLike == 1?'heart-fill':'heart'" size="16"
								:color="detail.isLike == 1?'#ff9494':'#34314F'" :label="detail.likeVolume"
								labelPos="right" labelSize="12"
								:labelColor="detail.isLike == 1?'#ff9494':'#34314F'"></u-icon>
						</view>
					</view>
				</view>
				<u-gap height="10"></u-gap>
				<view class="flex">
					<view class="mr20">
						<u-tag shape="circle" size="mini" color="#34314F" bgColor="#FFE5E5"
							:text="detail.petVarietyLabel" borderColor="#FFE5E5"></u-tag>
					</view>
					<view class="mr20">
						<u-tag shape="circle" size="mini" color="#34314F" bgColor="#FFE5E5" :text="detail.petAgeLabel"
							borderColor="#FFE5E5"></u-tag>
					</view>
					<view class="mr20">
						<u-tag shape="circle" size="mini" color="#34314F" bgColor="#FFE5E5"
							:text="detail.petStatusLabel" borderColor="#FFE5E5"></u-tag>
					</view>
				</view>
				<u-gap height="10"></u-gap>
				<view class="bgF7 radiusBox p20 f26 c343">
					“{{detail.declaration}}”
				</view>
			</view>
		</view>
		<u-gap height="20"></u-gap>
		<view class="m20 flex-au">
			<view class="flex1 mr20">
				<u-button shape="circle" open-type="share" color="#F4E3E5" :customStyle="{'color':'#34314F'}">
					推给朋友
				</u-button>
			</view>
			<view class="flex1 ml20">
				<u-button shape="circle" color="#FFDE6D" :customStyle="{'color':'#34314F'}" @click="openUrl('/pages/contacts/privateChat?to='+detail.userId)">
					想认识它
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {getPetinfo} from '@/common/api_pet.js'
	import banSwiper from '@/components/banSwiper/index.vue'
	export default {
		name: '',
		components:{
			banSwiper
		},
		data() {
			return {
				id:'',
				detail:{}
			}
		},
		onLoad(option) {
			this.id = option.id || null
			if(this.id){
				this.getPetinfo()
			}
		},
		onShareAppMessage(res) {
			return {
				title: this.detail.petName,
				path: '/subpage/pet/detail?id=' + this.id,
				imageUrl:this.api_host + this.detail.icon,
				desc: this.detail.petVarietyLabel,
				content: this.detail.declaration,
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
		methods: {
			async getPetinfo() {
				const res = await getPetinfo({
					id:this.id
				})
				if (res.code == 200) {
					this.detail = res.data
					uni.setNavigationBarTitle({
						title:this.detail.petName
					})
					this.detail.imgs = this.detail.images.split(',')
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFEEEE;
	}
	.swiper {
		height: 700rpx;
		overflow: hidden;
		.swiper-img{
			max-height: 600rpx;
		}
	}
</style>